<template>
  <div class="h-main p-4">
    <MyTable
      v-loading="loading"
      class="my-2"
      :data="list"
      :columns="columns"
      :is-show-selection="false"
    ></MyTable>
    <el-pagination
      v-model:currentPage="params.page"
      v-model:page-size="params.limit"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="justify-end"
      @size-change="handleQuery"
      @current-change="handleQuery"
    />
  </div>
</template>
<script setup lang="jsx">
import MyTable from "@/components/MyTable.vue";
import { useRouter, useRoute } from "vue-router";
import { getDisinfectFaultHistory } from "@/api/disinfect/log-center";
import useCRUD from "@/composables/useCRUD";

const router = useRouter();
const route = useRoute();

const columns = [
  { prop: "id", label: "编号" },
  {
    label: "故障内容",
    customRender(row) {
      return formatter(row);
    },
  },
  { prop: "createTime", label: "发生时间" },
  {
    label: "故障快照",
    customRender(row) {
      return (
        <el-button
          text
          bg
          type="primary"
          onClick={() => showSnapshot(row.logId)}
        >
          故障快照
        </el-button>
      );
    },
  },
];

const { params, list, loading, total } = useCRUD();
handleQuery();
async function handleQuery() {
  loading.value = true;
  const { data } = await getDisinfectFaultHistory(route.query.code);
  loading.value = false;
  list.value = data.list;
  total.value = data.total;
}

// 故障信息格式化
function formatter(row) {
  let content = "";
  const { navStatus, wheelStatus, uvlight, atomizer } = row;
  if (navStatus === 0 || navStatus === 1) content += "导航故障 ";
  if (wheelStatus !== 1) content += "运动系统故障 ";
  if (uvlight === -1) content += "紫外线灯故障 ";
  if (atomizer === -1) content += "雾化器故障 ";
  return content;
}

// 跳转到故障快照
function showSnapshot(id) {
  router.push({
    name: "disinfect-robot-details",
    query: { logId: id },
  });
}
</script>
